Skip to main content

📝 Forms & Inputs

The Forms & Inputs category includes all the necessary elements for creating interactive forms within your application. These components facilitate user data entry and interaction.

Available Components:

  • Text Field
  • Search Bar
  • Dropdown
  • Text Area
  • Toggle
  • Checkbox
  • Radio Button
  • Counter
  • Image Picker
tip

Each component is fully customizable, allowing you to drag and drop, resize, and tailor them to fit your app's specific needs. Additionally, every component supports adding actions, setting styles for specific screen sizes, and extensive customization to enhance functionality and design.

info

The settings available in the left and right toolbar may vary depending on the selected component.

1. Text Field​

  1. Add the Text Field:
    • Drag and drop the Text Field onto the Canvas.
  2. Position and Resize:
    • Place the text field in the desired location and adjust its size using percentage values or by dragging its edges.
  3. Customize the Text Field:
    • Left Toolbar:
      • Edit Label: Double-click on the label area to modify the label text.
      • Change Placeholder: Double-click on the text field area to update the placeholder text.
      • Choose Input Type: Select the type of input (Text, Email, Password, Number).
      • Add Action: Click on "Add Action" to define interactions.
      • Set Styles for Specific Screen Sizes: Customize the text field's appearance for different devices.
    • Right Toolbar:
      • Access comprehensive customization options, such as border style, color, and more.
  1. Add the Search Bar:
    • Drag and drop the Search Bar onto the Canvas.
  2. Position and Resize:
    • Place the search bar where desired and adjust its size accordingly.
  3. Customize the Search Bar:
    • Left Toolbar:
      • Change Icon: Select and customize the search icon.
      • Edit Placeholder: Modify the placeholder text within the search bar.
      • Add Action: Click on "Add Action" to define interactions.
      • Set Styles for Specific Screen Sizes: Tailor the search bar's appearance for different devices.
    • Right Toolbar:
      • Utilize extensive customization options, including color, border style, and more.

3. Dropdown​

  1. Add the Dropdown:
    • Drag and drop the Dropdown component onto the Canvas.
  2. Position and Resize:
    • Place the dropdown in the desired location and adjust its size as needed.
  3. Customize the Dropdown:
    • Left Toolbar:
      • Edit Label: Double-click on the label area to modify the label text.
      • Set Default State: Choose whether the dropdown is enabled or disabled by default.
      • Add Select Options:
        • Click on "Add Select Option" to add multiple options.
        • Define the Value and Label for each option.
      • Add Action: Click on "Add Action" to define interactions.
      • Set Styles for Specific Screen Sizes: Customize the dropdown's appearance for different devices.
    • Right Toolbar:
      • Access comprehensive customization options, including color, border style, and more.

4. Text Area​

  1. Add the Text Area:
    • Drag and drop the Text Area component onto the Canvas.
  2. Position and Resize:
    • Place the text area where desired and adjust its size accordingly.
  3. Customize the Text Area:
    • Left Toolbar:
      • Edit Label: Double-click on the label area to modify the label text.
      • Change Placeholder: Modify the placeholder text within the text area.
      • Set Styles for Specific Screen Sizes: Customize the Text Area’s appearance for different devices.
    • Right Toolbar:
      • Access comprehensive customization options, including color, border style, and more.

5. Toggle​

  1. Add the Toggle:
    • Drag and drop the Toggle component onto the Canvas.
  2. Position and Resize:
    • Place the toggle in the desired location and adjust its size as needed.
  3. Customize the Toggle:
    • Left Toolbar:
      • Set Default State: Choose whether the toggle is enabled or disabled by default.
      • Set Styles for Specific Screen Sizes: Customize the Toggle’s appearance for different devices.
    • Right Toolbar:
      • Utilize comprehensive customization options, including color, size, and more.

6. Checkbox​

  1. Add the Checkbox:
    • Drag and drop the Checkbox component onto the Canvas.
  2. Position and Resize:
    • Place the checkbox where desired and adjust its size accordingly.
  3. Customize the Checkbox:
    • Left Toolbar:
      • Edit Label: Double-click on the label area to modify the label text.
      • Add Action: Click on "Add Action" to define interactions.
      • Set Styles for Specific Screen Sizes: Customize the checkbox's appearance for different devices.
    • Right Toolbar:
      • Access comprehensive customization options, including color, border style, and more.

7. Radio Button​

  1. Add the Radio Button:
    • Drag and drop the Radio Button component onto the Canvas.
  2. Position and Resize:
    • Place the radio button in the desired location and adjust its size as needed.
  3. Customize the Radio Button:
    • Left Toolbar:
      • Add Select Options:
        • Click on "Add Select Option" to add multiple options.
        • Define the Value and Label for each option.
      • Add Action: Click on "Add Action" to define interactions.
      • Set Styles for Specific Screen Sizes: Tailor the radio button's appearance for different devices.
    • Right Toolbar:
      • Utilize comprehensive customization options, including color, border style, and more.

8. Counter​

  1. Add the Counter:
    • Drag and drop the Counter component onto the Canvas.
  2. Position and Resize:
    • Place the counter where desired and adjust its size accordingly.
  3. Customize the Counter:
    • Left Toolbar:
      • Allow Negative Numbers: Toggle the option to enable or disable negative numbers.
      • Add Action: Click on "Add Action" to define interactions.
      • Set Styles for Specific Screen Sizes: Customize the counter's appearance for different devices.
    • Right Toolbar:
      • Access comprehensive customization options, including color, border style, and more.

9. Image Picker​

  1. Add the Image Picker:
    • Drag and drop the Image Picker component onto the Canvas.
  2. Position and Resize:
    • Place the image picker where desired and adjust its size accordingly.
  3. Customize the Image Picker:
    • Left Toolbar:
      • Preview Image Toggle: Enable or disable image preview after upload.
      • Edit Placeholder: Modify the placeholder text within the image picker.
      • Add Action: Click on "Add Action" to define interactions.
      • Set Styles for Specific Screen Sizes: Customize the image picker’s appearance for different devices.
    • Right Toolbar:
      • Utilize comprehensive customization options, including color, border style, and more.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].

Happy Building with AppStruct!